import React,{useCallback, useEffect, useState} from "react"


export const Cpp=()=>{
    const[kw,setKw]=useState('')

    // 每次渲染函数都会进行创建，那么我们需要进行缓存除了第一次被创建
    const change=useCallback((e)=>{
        setKw(e.target.value)
        console.log(e.target.value);
        
    },[])
    return <>
    {/* 搜索框 */}
    <Bpp change={change}/>
    <hr/>
    {/* 搜索框后搜索结果 */}
    <SearchResult query={kw}/>
    </>
}
const Bpp=React.memo((props)=>{

    console.log("子组件渲染了");
    

    return<>
    <input type='text' onChange={props.change}/>
    </>
})

const SearchResult=(props)=>{
    const [list,setList]=useState([])
    useEffect(()=>{
        if(!props.query)return setList([])
        fetch('http://api.liulongbin.top/v1/words?kw='+props.query)
    .then(res=>res.json()).then((res=>{console.log(res);setList(res.data)}
    ))
    },[props.query])
    
return list.map((item)=><p key={item.id}>{item.word}</p>)
    
}